import React from 'react';
import { Input, Button, List } from 'antd';
import 'antd/dist/antd.css';
import './TodoListAnt.css'


// 无状态组件

const TodoListUI = (props) => {
    return (
        <div className='container'>
            <Input
                placeholder='todo info'
                className='input'
                value={props.inputValue}
                onChange={props.handleInputChange}
            ></Input>
            <Button type='primary' onClick={props.handleValueSubmit}>提交</Button>
            <List
                className='list'
                size="small"
                bordered
                dataSource={props.list}
                renderItem={(item, index) => (<List.Item onClick={() => { props.handleItemDelete(index) }}>{item}</List.Item>)}
            />
        </div>
    )
}

// class TodoListUI extends Component {
//     render() {
//         return( 
//             <div className='container'>
//                 <Input 
//                 placeholder='todo info' 
//                 className='input' 
//                 value={this.props.inputValue}
//                 onChange={this.props.handleInputChange}
//                 ></Input>
//                 <Button type='primary' onClick={this.props.handleValueSubmit}>提交</Button>
//                 <List
//                     className='list'
//                     size="small"
//                     bordered
//                     dataSource={this.props.list}
//                     renderItem={(item, index) => (<List.Item onClick={(index) => {this.props.handleItemDelete(index)}}>{item}</List.Item>)}
//                 />
//             </div>
//          )
//     };
// };

export default TodoListUI;